import { observer } from 'mobx-react';
import React from 'react';
import { Row, Col } from 'antd';
import TableCell from './table-cell';

@observer
export default class LittleCard extends React.Component<{ datas, onChange, canEdit, width }, any> {

    constructor(props) {
        super(props);
        this.state = { currentEditFieldid: '' }
    }

    changeCurrentEditFieldid = (fieldid) => {
        this.setState({ currentEditFieldid: fieldid });
    }

    render() {
        const { datas, onChange, canEdit, width } = this.props;
        let style = {};
        if (width) {
            style = { width: width };
        }
        return <div className="cube_littleCard" onClick={(e) => {
            this.changeCurrentEditFieldid('');
        }}>
            <div style={style}>
                {datas.map(row => {
                    let spanNum = Math.round(24 / row.length);
                    let remainNum = 24 - spanNum * row.length;//24栅格剩余几个未用
                    return <Row gutter={10} style={{ height: '50px', paddingTop: '10px' }}>
                        {row.map((col, index) => {
                            let num = spanNum;
                            if (index < remainNum) {//剩余的栅格给前面的列
                                num += 1;
                            }
                            return <Col span={num}>
                                <div>
                                    {
                                        col.field &&
                                        <TableCell 
                                            style={col.style}
                                            changeCurrentEditFieldid={this.changeCurrentEditFieldid}
                                            currentEditFieldid={this.state.currentEditFieldid}
                                            canEdit={canEdit}
                                            onChange={onChange} 
                                            field={col.field} 
                                        />
                                    }
                                </div>
                            </Col>
                        })}
                    </Row>
                })}
            </div>
        </div>
    }
}